<template>
  <div class="discuss_detail_box">
    <div style=" position: fixed;
                 top: 0;
                 left: 0;
                 width: 100%;
                 z-index: 999;">
      <van-nav-bar
        title="文章展示"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft(1)"
      />
    </div>
    <div class="article_content">
      <h3>{{ talk.name }}</h3>
      <UserCar></UserCar>
      <div class="article">
        <p>
          婚礼是人生中一段特殊而美好的时光，而婚纱则是整个仪式的焦点之一。选择一款合适的婚纱是每位新娘都会面临的重要任务，因为婚纱不仅要体现个人品味和风格，还要让新娘在这个特殊的日子里散发出独特的光彩。下面是一些建议，帮助你在婚纱海选中找到那一款梦寐以求的完美之物。</p>
        <p>在开始选购婚纱之前，首先要明确的是你的预算范围。婚纱的价格因品牌、设计和材质而异，因此确定一个合理的预算可以帮助你更有针对性地挑选。</p>
        <p>
          你的婚礼主题和场地也是选择婚纱时需要考虑的重要因素。如果你的婚礼主题是浪漫唯美，可以选择拖尾长裙的公主裙款；如果是清新简约，可以考虑简约优雅的设计。此外，婚礼的场地和季节也会影响你的选择，确保你的婚纱与整体氛围相协调</p>
      </div>
      <van-divider>精彩评论</van-divider>
      <div class="comment">
        <van-empty v-if="comments.length === 0" image="error" description="暂时还没有评论"/>
        <Comment v-else v-for="(item, index) in comments" :comment="item" :key="index"></Comment>
      </div>
      <div class="write_comment_box">
        <div class="comment_left">
          <img src="../assets/wei.jpg" style="width: 40px; height: 40px; border-radius: 50%" alt="">
        </div>
        <div class="comment_right">
          <div class="comment_info">
            <p style="text-align: left; font-weight: bolder; margin: 5px 10px;width: 247px">Viego</p>
          </div>
          <van-field
            v-model="message"
            rows="1"
            autosize
            type="textarea"
            maxlength="400"
            placeholder="请输入留言"
            show-word-limit
          />
          <van-button @click="submit_comment()" style="margin-right: -180px" type="primary" size="mini">发表</van-button>
          <div class="CodeMirror">
            <!--<codemirror  ref="mycode" :value="curCode" :options="cmOptions" class="code"></codemirror>-->
          </div>
        </div>
      </div>
    
    </div>
  
  </div>
</template>

<script>

import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import UserCard from "@/components/UserCard";
import Comment from "@/components/Comment";

let cid = 2;
export default {
  name: "DiscussDetail",
  components: {
    UserCar: UserCard,
    Comment: Comment
  },
  props: {},
  data() {
    return {
      user: {
        username: 'Viego',
        img: '/profile/upload/wei.jpg',
        // like:521000,
      },
      talk: {},
      comments: [
        {
          cid: 1,
          user: {username: 'Mikasa', img: '/profile/upload/jinx.jpg'},
          message: "永远更党走",
          submit_time: '2023-11-21 07:05:51',
          like: 162000,
          is_liked: false
        },
        {
          cid: 1,
          user: {username: 'Allen-Jerg', img: '/profile/upload/艾伦.jpg'},
          message: "塔塔开！！！",
          submit_time: '2023-11-23 09:37:51',
          like: 530,
          is_liked: false
        },
      ],
      message: '',
      curCode: '测试',
      cmOptions: {
        autorefresh: true,
        tabSize: 4,
        mode: 'text/x-properties',
        theme: 'ayu-mirage',
        line: true,
        viewportMargin: Infinity, //处理高度自适应时搭配使用
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 2,
        smartIndent: true,
        // readOnly: true, // 只读
        showCursorWhenSelecting: true,
        firstLineNumber: 1,
        lineNumbers: true, // 显示行号
        // mode: 'c++/x-yaml', // 语法model
        gutters: ['CodeMirror-lint-markers'], // 语法检查器
        // theme: "ambiance",
        lint: true, // 开启语法检查
      }
    }
  },
  methods: {
    onClickLeft(index) {
      this.$router.push({name: 'talk', params: index})
    },
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? ('0' + s) : s;
    },
    submit_comment() {
      if (this.message !== '') {
        var date = new Date();
        //年 getFullYear()：四位数字返回年份
        var year = date.getFullYear();  //getFullYear()代替getYear()
        //月 getMonth()：0 ~ 11
        var month = date.getMonth() + 1;
        //日 getDate()：(1 ~ 31)
        var day = date.getDate();
        //时 getHours()：(0 ~ 23)
        var hour = date.getHours();
        //分 getMinutes()： (0 ~ 59)
        var minute = date.getMinutes();
        //秒 getSeconds()：(0 ~ 59)
        var second = date.getSeconds();
        
        var time = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) + ':' + this.addZero(minute) + ':' + this.addZero(second);
        let comment = {
          cid: cid++,
          user: this.user,
          message: this.message,
          submit_time: time,
          like: 0,
          is_liked: false
        }
        this.message = ''
        this.comments.push(comment)
      }
    },
  },
  created() {
    this.talk = this.$route.query.talk
    console.log("talk = " + this.talk)
  }
  
}
</script>

<style scoped lang="less">
.discuss_model_box {

}

.article_content {
  padding: 0px 15px;
  margin-top: 65px;
  //padding: 0 10px;
}

.article {
  p {
    text-indent: 30px;
    text-align: left;
  }
}

.comment {
  //height: 1000px;
  width: 100%;
  //border-radius: 10px;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) ;
}

.write_comment_box {
  display: flex;
  width: 100%;
  //height: 500px;
  //border: 1px red solid;
}
.CodeMirror {
  font-family: monospace;
  height: 71vh;
  direction: ltr;
  text-align: left;
}

</style>
